<template>
  <div class="container">
    <!-- 头部搜索部分 -->
    <div style="height: 56px; width: 100%;">
      <van-row type="flex" justify="space-around" align="center" style="padding:0px 16px;">
        <van-col style="width:100%;">
          <van-search v-model="filtername" placeholder="请输入姓名或手机号" shape="round" @input="onSearch"></van-search>
        </van-col>
      </van-row>
    </div>
    <!-- 主体部分 -->
    <van-list v-model="loading" :finished="finished" @load="onLoad" class="ss">
      <van-row class="user_classification_box">
        <van-col
          v-for="(item, index) in managerList"
          :key="index"
          @click="handlePushDetails(item.id)"
          class="box_big"
        >
          <span class="familyname" :class="getBackgroundColor(item.id)">{{item.name.slice(0,1)}}</span>
          <van-row class="user_box_right">
            <van-col>{{item.name}}</van-col>
            <van-col>{{item.addTime.substring(0,10)}}</van-col>
          </van-row>
        </van-col>
      </van-row>
    </van-list>
    <div class="num_footer">共{{total}}位{{moudleName}}</div>
  </div>
</template>
<script>
import {
  Search,
  List,
  Row,
  Col,
  Image,
  Dialog,
  Toast,
  IndexBar,
  IndexAnchor
} from 'vant';
import { authInfo, managerList } from '@/api/api';
import avatar_default from '@/assets/images/avatar_default.png';

export default {
  data() {
    return {
      avatar_default,
      loading: false,
      finished: false,
      managerList: [],
      total: '',
      moudleName: '',
      page: 0,
      limit: 10,
      positionId: '',
      filtername: '',
      parentId: -1,
    };
  },
  created() {
    if(this.$route.query.positionId != null && this.$route.query.positionId != undefined && this.$route.query.positionId != ''){
      this.positionId = this.$route.query.positionId;
    }
    if(this.positionId == 5001){
      document.title = '销售经理管理';
      this.moudleName = '区域经理';
    }else if(this.positionId == 6001){
      document.title = '联盟商管理';
      this.moudleName = '联盟商';
    }else if(this.positionId == 6002){
      document.title = '加盟商管理';
      this.moudleName = '加盟商';
    }else if(this.positionId == 6003){
      document.title = '代理商管理';
      this.moudleName = '代理商';
    }
  },
  watch:{
      '$route'() {
          if(this.$route.query.positionId != null && this.$route.query.positionId != undefined && this.$route.query.positionId != ''){
            this.positionId = this.$route.query.positionId;
          }
          if(this.positionId == 5001){
            document.title = '销售经理管理';
          }else if(this.positionId == 6001){
            document.title = '联盟商管理';
          }else if(this.positionId == 6002){
            document.title = '加盟商管理';
          }else if(this.positionId == 6003){
            document.title = '代理商管理';
          }
          this.filtername = '';
          this.onSearch();
      }
  },

  methods: {
    onSearch() {
      this.page = 0;
      this.managerList = [];
      this.getManagerList();
    },

    getBackgroundColor(id) {
      return 'familynameColor' + (id%10);
    },

    refreshUserInfo() {
      authInfo().then(res => {
        this.parentId = res.data.data.managerId;
        this.getManagerList();
      });
      //this.getManagerList();
    },

    // 跳转路径
    handlePushDetails(managerId) {
      
     this.$router.push(`/user/admin/detail/${managerId}`);
    },

    getManagerList(){
      this.page ++;
      if (this.page == 1){
        this.managerList.clear;
      }
       managerList({
        page: this.page,
        limit: this.limit,
        positionId: this.positionId,
        filtername: this.filtername,
        parentId: this.parentId,
      }).then(res => {
          this.managerList.push(...res.data.data.list);
          this.total = res.data.data.total;
          this.pages = res.data.data.pages;
          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch(err => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },

    onLoad() {
      this.refreshUserInfo();
    }
  },
  components: {
    [Search.name]: Search,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Image.name]: Image,
    [Image.Toast]: Toast,
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>
<style lang="scss" scoped>
/deep/ .van-search {
  padding-left: 0;
}

.familyname{
  display:inline-block;
  width:50px;
  height:50px;
  font-size:36px;
  text-align:center;
  border-radius:7px;
}

.familynameColor1{
  background-color: #129b91;
  color:#fff;
}

.familynameColor2{
  background-color:#07bace;
  color:#fff;
}

.familynameColor3{
  background-color:#e92c6c;
  color:#fff;
}

.familynameColor4{
  background-color:#2996eb;
  color:#fff;
}

.familynameColor5{
  background-color: #ffa619;
  color:#fff;
}

.familynameColor6{
  background-color: #4eb55a;
  color:#fff;
}

.familynameColor7{
  background-color: #724abd;
  color:#fff;
}

.familynameColor8{
  background-color:#07bace;
  color:#fff;
}

.familynameColor9{
  background-color:#e92c6c;
  color:#fff;
}

.familynameColor0{
  background-color:#2996eb;
  color:#fff;
}

.container {
  /* 因为是遮罩效果所以要fixed */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: #fff;
  /*必须 */
  display: flex;
  /* 必须，规定元素的排列方向 */
  flex-direction: column;
  /* 必须占满屏 */
  height: 100%;
  /* 没有这个就不能滚动了 */
  overflow: auto;
}
.ss {
  width: 100%;
  /* 占了百分百-flex:0的占位 */
  flex: 1;
  /* background: #143541; */
  font-size: 40px;
  text-align: left;
}
.publish {
  line-height: 30px;
  height: 30px;
  text-align: end;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 12px;
  padding: 0 3px 0 10px;
  // letter-spacing: 5px;
  color: white;
  margin-left: 10px;
  white-space: nowrap;
}
.num_footer {
  /* 占位用 */
  flex: 0;
  margin: 14px auto;
  /* background: #555555; */
  margin-bottom: 15px;
  font-size: 16px;
  color: rgba(157, 155, 155, 1);
}
.view-router {
  padding-bottom: 15px;
}
.user_classification_box {
  padding: 0 16px;
  width: 100%;
  background-color: #fff;
  .box_big {
    display: flex;
    align-items: center;
    height: 66px;
    width: 100%;
    img {
      border-radius: 7px;
      width: 50px;
      height: 50px;
    }
    .user_box_right {
      display: flex;
      margin-left: 8px;
      height: 66px;
      line-height: 66px;
      width: calc(100% - 58px);
      border-bottom: 1px solid rgb(237, 237, 237);
      .van-col:nth-of-type(1) {
        
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
      }
      .van-col:nth-of-type(2) {
        color: #9d9b9b;
        font-size: 14px;
        flex: 1;
        text-align: right;
      }
    }
  }
}
</style>
